<title>设置我的资料</title>

<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>设置</cite></a>
    <a><cite>我的资料</cite></a>
  </div>
</div>
  
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">设置我的资料</div>
        <div class="layui-card-body" pad15>
          
          <div class="layui-form" lay-filter="">
            <div class="layui-form-item">
              <label class="layui-form-label">手机</label>
              <div class="layui-input-inline">
                <input type="text" id="phone" lay-verify="phone" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">姓名</label>
              <div class="layui-input-inline">
                <input type="text" id="name" lay-verify="name" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">性别</label>
              <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男">
                <input type="radio" name="sex" value="0" title="女">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">头像</label>
              <div class="layui-input-inline">
                <input name="avatar" lay-verify="required" id="photo" placeholder="图片地址" value="http://cdn.layui.com/avatar/168.jpg" class="layui-input">
              </div>
              <div class="layui-input-inline layui-btn-container" style="width: auto;">
                <button type="button" class="layui-btn layui-btn-primary" id="LAY_avatarUpload">
                  <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <button class="layui-btn layui-btn-primary" layadmin-event="avartatPreview">查看图片</button >
              </div>
           </div>
            <div class="layui-form-item">
              <label class="layui-form-label">邮箱</label>
              <div class="layui-input-inline">
                <input type="text" id="email" value="" lay-verify="email" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">微信</label>
              <div class="layui-input-inline">
                <input name="avatar" id="wechat" placeholder="OpenId" class="layui-input">
              </div>
              <div class="layui-input-inline layui-btn-container" style="width: auto;">
                <button class="layui-btn layui-btn-primary" data-type="bindWechat">
                  <i class="layui-icon">&#xe677;</i>绑定微信
                </button >
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="setmyinfo">确认修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重新填写</button>
              </div>
            </div>
          </div>
          
        </div>
      </div>
    </div>
  </div>
</div>

<script>
layui.use(['admin', 'table', 'layer'], function(){
  var $ = layui.$;
  var admin = layui.admin;
  var view = layui.view;
  var form = layui.form;
  var layer = layui.layer;

  var popup = '' +
          '<div align="center">\n' +
          '  <img src="" id="imageQR" style="width: 300px" />\n' +
          '  <p id="msg" style="text-align: center;">\n' +
          '  </p>\n' +
          '  <button class="layui-btn layui-btn-primary" style="margin-top: 10px" id="btnClose"> ' +
          '  <i class="layui-icon layui-icon-close"></i>关 闭 ' +
          '  </button>\n' +
          '</div>'

  var count = 1;
  var interval;

  admin.req({
    url: layui.setter.baseUrl + '/JwtAPI/Auth/Me',
    type: "get",
    done: function (res){
      if(res.code == 0){
        $("#phone").val(res.data.phone);
        $("#name").val(res.data.name);
        $("input[name=sex][value=" + res.data.sex + "]").prop("checked", "true");
        $("#email").val(res.data.email);
        form.render();
      }
    }
  });

  //事件
  var active = {
    bindWechat: function(){
      admin.popup({
        title: '绑定微信',
        area: ['400px', '500px'],
        maxMin: false,
        closeBtn: 0,
        shadeClose:false,
        content: popup,
        data: {
          id: 1
        },
        success: function(){
          //将 views 目录下的某视图文件内容渲染给该面板
          //layui.view(this.id).render('视图文件所在路径');
          admin.req({
            url: layui.setter.baseUrl + '/WechatAPI/Wechat/qrurl',
            method: "get",
            data: {
              guid: 1
            },
            done: function(res){
              setTimeout(function(){
                if(res.code == 0){
                  console.log(res);
                  $("#imageQR").attr("src", res.data);
                  $("#msg").append("此二维码3分钟内有效，请使用微信扫码。绑定成功后本窗口将自动关闭。");
                }
              }, 300);

              interval = setInterval(function () {
                if (count >= 55) {
                  admin.message.error("本次绑定超时，请重试.");
                  clearInterval(interval);//停止
                  layer.closeAll('page');
                }

                admin.req({
                  url: layui.setter.baseUrl + '/WechatAPI/Wechat/qrurl',
                  method: "get",
                  data: { guid: 1 },
                  success: function(res1) {
                    if (res1.code == 0) {

                      //admin.message.success("微信公众平台绑定成功");
                      clearInterval(interval );//停止
                      //layer.closeAll('page');
                    }
                  },
                  error: function() {
                    clearInterval(interval);//停止
                    layer.closeAll('page');
                  }
                });
                count += 1;
              },3000);
            }
          })
        },
        end: function () {
          //table.reload("userTable");
        }
      });
    },

  };

  $('.layui-btn').on('click', function () {
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });

  $("#btnClose").click(function() {
    clearInterval(interval); //停止
    layer.closeAll('page');
  });
});

</script>